@import "../def";

$treeItem_height: $sub_item_height;
$treeItem_padding:0 0 0 calc(15px * var(--level) + 10px);

$treeItem_title_padding: 0 10px;

$treeItem_hover_bgc: darken($tree_bgc, 3%);
$treeItem_active_bgc: lighten($tree_bgc, 3%);
$treeItem_active_hover_bgc: $row_hover_bgc;

$treeItem_editing_bgc: #fffc;
$treeItem_editing_input_margin: 0 0 0 5px;
$treeItem_editing_input_padding: 0 4rem 0 5px; // 0 4em 0 5px;

$actionGroup_hover_bgc: lighten($treeItem_hover_bgc, 5%);

.list {
    height: $sub_body_height;
    overflow: hidden auto;
    &:global(.loading) {
        pointer-events: none;
    }
}

.treeItem_inner,
.treeItem_create {
    @include aic;
    height: $sub_item_height;
    position: relative;
}

.treeItem_inner {
    &:hover {
        .actionGroup {
            @include aic;
        }
    }
}
//
// 功能按钮
.treeItem_create_actionGroup {
    flex: none;
}

.treeItem_create {
    @include mp(0 10px, 0 10px);
    background-color: #fff;
    border: 1px solid #999;
    input {
        @include hh(2em);
        border: 0;
        flex: auto;
    }
}

// 按钮组
.actionGroup {
    flex: none;
    display: none;
}

.actionGroup_icon {
    @include wh($sub_action_wh);
    border: 0;
    border-radius: $sub_action_bdrs;
    background-color: transparent;
    &:hover {
        @include cc($tree_icon_hover_color, $actionGroup_hover_bgc);
    }
    &:global(.delete:hover),
    &:global(.cancel:hover) {
        @include cc(#fee, #c33);
    }
    &:global(.submit:hover) {
        @include cc(#eef, #33f);
    }
}

//@at-root//
.treeItem_item,
.treeItem_item_title {
    @include ovf;
}

.treeItem_item,
.treeItem_item_editing,
.treeItem_item:hover .actionGroup {
    @include aic;
}

.treeItem_item,
.treeItem_item_editing,
.treeItem_item_create {
    @include hh($treeItem_height);
    padding:    $treeItem_padding;
    > [name="#folder-open"] {
        display: none;
    }
    &:global(.active) {
        > [name="#folder-open"] {
            display: inline-flex;
        }
        > [name="#folder"] {
            display: none;
        }
    }
}

.treeItem_item {
    .actionGroup {
        display: none;
    }
    &:hover {
        background-color: $treeItem_hover_bgc;
    }
    &:global(.scrolling) {
        pointer-events: none;
    }
    &:global(.active) {
        background-color: $treeItem_active_bgc;
        &:hover {
            background-color: $treeItem_active_hover_bgc;
        }
    }
}

.treeItem_item_create,
.treeItem_item_editing {
    background-color: $treeItem_editing_bgc;
    position: relative;
    .actionGroup {
        display: flex;
        position: absolute;
        top: 0;
        right: 5px;
        bottom: 0;
        margin: auto;
        z-index: 3;
    }
}

.treeItem_item_create,
.treeItem_item_input {
    @include hh($treeItem_height);
    display: block;
    position: relative;
    flex: auto;
    input {
        @include wh;
        padding: $treeItem_editing_input_padding;
    }
}

.treeItem_item_input {
    padding: $treeItem_editing_input_margin;
}

.actionGroup_icon,
.treeItem_item_icon {
    @include mp;
    flex:   none;
    color:  $tree_icon_color;
    font-size: $icon_fsz;
}

.treeItem_item_title {
    flex:   auto;
    padding:$treeItem_title_padding;
}

.actionGroup_icon {
    @include wh(24px);
    border: 0;
    border-radius: 2px;
    background-color: transparent;
    &:hover {
        @include cc($tree_icon_hover_color, $actionGroup_hover_bgc);
    }
    &:global(.delete:hover),
    &:global(.cancel:hover) {
        @include cc(#fee, #c33);
    }
    &:global(.submit:hover) {
        @include cc(#eef, #33f);
    }
}
